﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions" x:Class="ShellLight.MainPage"
    d:DesignHeight="300" d:DesignWidth="400">
  <UserControl.Resources>
    <Storyboard x:Name="OpenHelpStoryboard">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="CommandContent">
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-180">
        	<EasingDoubleKeyFrame.EasingFunction>
        		<BackEase EasingMode="EaseInOut"/>
        	</EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CommandContent">
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="HelpContent">
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.95"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="HelpContent">
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
        	<EasingDoubleKeyFrame.EasingFunction>
        		<BackEase EasingMode="EaseInOut"/>
        	</EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="CloseHelpStoryboard">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="HelpContent">
        <EasingDoubleKeyFrame KeyTime="0" Value="0">
        	<EasingDoubleKeyFrame.EasingFunction>
        		<BackEase EasingMode="EaseInOut"/>
        	</EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="180">
        	<EasingDoubleKeyFrame.EasingFunction>
        		<BackEase EasingMode="EaseInOut"/>
        	</EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="HelpContent">
        <EasingDoubleKeyFrame KeyTime="0" Value="0.95"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CommandContent">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.95"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="CommandContent">
        <EasingDoubleKeyFrame KeyTime="0" Value="-180">
        	<EasingDoubleKeyFrame.EasingFunction>
        		<BackEase EasingMode="EaseInOut"/>
        	</EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
        	<EasingDoubleKeyFrame.EasingFunction>
        		<BackEase EasingMode="EaseInOut"/>
        	</EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  </UserControl.Resources>

  <Grid x:Name="LayoutRoot" DataContext="{Binding}">
    <Grid.Background>
      <ImageBrush ImageSource="{Binding BackgroundImageSource}" />
    </Grid.Background>
    <Grid.RowDefinitions>
      <RowDefinition Height="20" />
      <RowDefinition Height="*" />
      <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="150" />
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Row="0" Grid.Column="0" Background="Black" Orientation="Horizontal" Opacity="0.8">
      <TextBlock Margin="5,0,0,0" VerticalAlignment="Center" Foreground="White" Text="{Binding CommandInFocus.Name}" />
    </StackPanel>
    <StackPanel Grid.Row="0" Grid.Column="1" Background="Black" Orientation="Horizontal" Opacity="0.8">
      <Button Click="CloseCommandButton_Click" Visibility="{Binding CommandInFocusVisibility}" FontSize="8" Margin="130,0,0,0" Padding="0" Width="16" Height="16" Content="x" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Right"/>
    </StackPanel>

    <Grid x:Name="ContentGrid" Grid.ColumnSpan="2" Grid.Row="1" >
      <Grid.RowDefinitions>
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>

      <!-- Add Brush via Rectangle -->
      <Border x:Name="CommandContent" Background="White" Opacity="0.95" Visibility="{Binding CommandInFocusVisibility}" BorderThickness="2" BorderBrush="Black" CornerRadius="15" Margin="25" Padding="10">
        <Border.Projection>
          <PlaneProjection/>
        </Border.Projection>
        <ContentControl Content="{Binding CommandInFocus.View}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
      </Border>
      <Border x:Name="WebbrowserHelpContent" Background="White" Opacity="0" Visibility="{Binding Visibility, ElementName=HelpContent}" BorderThickness="2" BorderBrush="Black" CornerRadius="15" Margin="25" Padding="10">
        <WebBrowser x:Name="wb" Visibility="Collapsed"/>
      </Border>
      <Border x:Name="HelpContent" Background="White" Opacity="0" Visibility="Collapsed" BorderThickness="2" BorderBrush="Black" CornerRadius="15" Margin="25" Padding="10">
        <Border.Projection>
          <PlaneProjection RotationY="180"/>
        </Border.Projection>
          <!-- Add Rectangle the same size as the WebBrowser control -->
          <Rectangle x:Name="htmlRectangle" Width="{Binding Width, ElementName=wb}" Height="{Binding Height, ElementName=wb}">
            <Rectangle.Fill>
              <!-- Fill (set background) as an HTML Brush -->
              <HtmlBrush x:Name="htmlBrush" SourceName="wb"/>
            </Rectangle.Fill>
          </Rectangle>
      </Border>
    </Grid>

    <StackPanel Grid.Row="2" Grid.Column="0" x:Name="taskStackPanel"  Orientation="Horizontal" Background="Black" Opacity="0.8">
      <Button Margin="5" Click="SearchButton_Click" Style="{StaticResource GlassButtonStyle}"  Background="#FFABE3FF" BorderBrush="#FF00AAFF" Height="30" Width="30">
      	<Image Source="Images/logo.png" Height="20" Width="20"/>
      </Button>
      <ItemsControl ItemsSource="{Binding ActiveCommands}">
        <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" Background="Transparent"/>
          </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <Button Margin="2" Command="{Binding}" CommandParameter="{Binding Context}">
            	<Image Source="{Binding IconSource}" Width="30" Height="30" />
            </Button>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
      </ItemsControl>
    </StackPanel>

    <StackPanel Grid.Row="2" Grid.Column="1" Background="Black" Opacity="0.8">

      <ItemsControl ItemsSource="{Binding TrayCommands}" HorizontalAlignment="Right" HorizontalContentAlignment="Right" Margin="10">
        <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" Background="Transparent"/>
          </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <Button Command="{Binding}" CommandParameter="{Binding Context}" BorderThickness="0" Background="Transparent">
            	<Image Source="{Binding IconSource}" Width="16" Height="16" />
            </Button>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
      </ItemsControl>
    </StackPanel>
  </Grid>
</UserControl>
